<template>
  <div class="parallel-node">
    <!-- 面包屑 -->
    <eg-breadcrumb
      :breadcrumbDatas="breadcrumbDatas"
      :attrObject="attrObject"
      @breadcrumbItemClick="breadcrumbItemClick"
    >
      <span slot="separator">></span>
    </eg-breadcrumb>
    <!-- 平行分支几点展示 -->
    <div style="display: flex; margin-top: 4px;">
      <div class="parallel-line" v-for="parallel in renderLine.parallelismNodes" :key="parallel.nodeId">
        <ParallelTimeLine
          :source="'todo'"
          :curNodeIDs="curNodeIDs"
          :parallelNode="parallel.childNode"
          @route-node="routeNode"
          @select-person="selectPerson"
        ></ParallelTimeLine>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * @module ParallelNode
 * @author 何志强
 * @description 流程平行分支节点
 */
import ParallelTimeLine from "./ParallelTimeLine.vue";
export default {
  components: { ParallelTimeLine },
  name: "ParallelNode",
  data() {
    return {
      attrObject: {
        separatorSlot: true,
        itemSlot: false
      },
      breadcrumbDatas: [],
      renderLine: null,
      poeList: []
    };
  },
  /**
   * Props 接受父组件的传值 重要参数
   * @prop {Object} line 流程节点数据源
   */
  props: {
    line: {
      type: Object
    },
    source: {
      type: String,
      default: "applicate"
    },
    curNodeIDs: Array
  },
  watch: {
    line: {
      deep: true,
      immediate: true,
      handler(va) {
        if (va) {
          if (this.breadcrumbDatas.length == 0) {
            this.renderLine = va;
            this.breadcrumbDatas = [];
            this.breadcrumbDatas.push({
              name: `${this.line.name}(${this.line.parallelismNodes.length}条)`,
              nodeId: this.line.nodeId,
              routeNode: va
            });
          }
        }
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    getRoutePeople() {
      this.poeList = [];
      let _this = this;
      this.line.parallelismNodes.forEach(parall => {
        _this.getChildNodePeo(parall.childNode);
      });
      return this.poeList;
    },
    getChildNodePeo(childNode) {
      let _this = this;
      if (childNode.type === "route" && childNode.parallelismNodes) {
        childNode.parallelismNodes.forEach(parall => {
          _this.getChildNodePeo(parall.childNode);
        });
      } else {
        _this.poeList = [
          ..._this.poeList,
          { nodeId: childNode.nodeId, type: _this.getRuleType(childNode), approvals: _this.getApprovalList(childNode) }
        ];
      }
      if (childNode.childNode) {
        _this.getChildNodePeo(childNode.childNode);
      }
    },
    // 自身后面的面包屑 清除
    breadcrumbItemClick(bread, index) {
      this.breadcrumbDatas = this.breadcrumbDatas.filter((item, findex) => findex <= index);
      this.renderLine = bread.routeNode;
    },
    getRuleType(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].type;
      else return "";
    },
    getApprovalList(line) {
      if (line.properties && line.properties.actionerRules) return line.properties.actionerRules[0].approvals;
      else return [];
    },
    getAutoPass(line, text) {
      if (line.type == "approver") {
        line.approvalList.length == 0 && line.noneActionerAction == "admin";
        let approveList = line.properties.actionerRules[0].approvals.length;
        if (approveList == 0 && line.noneActionerAction == text) return true;
        else return false;
      } else return false;
    },
    getActType(line) {
      let act = line.properties.actionerRules[0].actType;
      if (act == "or") return "或签";
      else return "会签";
    },
    getAppproveOriNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_originator") {
          return true;
        } else return false;
      } else return false;
    },
    getApproveNode(line) {
      if (line.type == "approver") {
        let ruleT = line.properties.actionerRules[0].type;
        if (ruleT == "target_post" || ruleT == "target_pos" || ruleT == "target_charge") {
          return true;
        } else return false;
      } else return false;
    },
    routeNode(routeNode) {
      this.renderLine = routeNode;
      this.breadcrumbDatas.push({
        name: `${routeNode.name}(${routeNode.parallelismNodes.length}条)`,
        nodeId: routeNode.nodeId,
        routeNode: routeNode
      });
    },
    selectPerson(approveNode, cb) {
      this.$emit("select-person", approveNode, cb);
    }
  }
};
</script>

<style lang="scss">
.parallel-node {
  padding: 4px 0 8px 8px;
  .parallel-line {
    width: 174px;
    background: #ffffff;
    border-radius: 4px;
    margin-right: 8px;
    // padding: 8px;
    padding: 12px 8px 0 8px;
    .ant-timeline-item {
      padding-bottom: 8px !important;
    }
    .ant-timeline-item-last {
      padding-bottom: 0px !important;
    }
    .ant-timeline-item-content {
      min-height: 24px;
    }
  }
  .eg-breadcrumb .ant-breadcrumb > span:last-child {
    font-size: 12px !important;
    color: rgba(0, 0, 0, 0.9);
    font-weight: 600;
    line-height: 20px !important;
  }
  .eg-breadcrumb {
    .ant-breadcrumb {
      .ant-breadcrumb-link {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
      }
    }
    .ant-breadcrumb-separator {
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>

